import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import './XinXI.css';
import { message } from 'antd';


const XinXi = () => {
  const { userId } = useParams();

  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
  const [newPassword, setNewPassword] = useState('');
  const [oldPassword, setOldPassword] = useState('');

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true);
      console.log("userId", userId);
      try {
        const response = await axios.get(`http://localhost:3001/users/${userId}`);
        console.log(response.data);
        setUsers(response.data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []);

  const handleSubmit = async () => {
    try {
      const response = await axios.post('http://localhost:3001/changePassword', {
        userId,
        oldPassword,
        newPassword,
      });

      if (response.status === 200) {
        message.success('Password updated successfully.');
        setShowChangePasswordModal(false)
      } else {
        message.error('Failed to update password.');
      }
    } catch (error) {
      message.error(error.response.data);
    }
  };

  if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div className="user-info-container">
      {users.map((user) => (
        <div key={user.id} className="user-card">
          <h2 className="user-card-title">用户信息</h2>
          <p className="user-info"><span>ID:</span> {user.id}</p>
          <p className="user-info"><span>用户名:</span> {user.username}</p>
          <p className="user-info"><span>积分:</span> {user.points}</p>
          <button className="change-password-button" onClick={() => setShowChangePasswordModal(true)}>
            修改密码
          </button>
        </div>
      ))}

      {showChangePasswordModal && (
        <div className="modal">
          <div className="modal-content">
            <span className="close" onClick={() => setShowChangePasswordModal(false)}>
              ×
            </span>
            <h2 className="modal-title">修改密码</h2>
            <div className="input-group">
              <label htmlFor="oldPassword">旧密码:</label>
              <input
                type="password"
                id="oldPassword"
                value={oldPassword}
                onChange={(e) => setOldPassword(e.target.value)}
              />
            </div>
            <div className="input-group">
              <label htmlFor="newPassword">新密码:</label>
              <input
                type="password"
                id="newPassword"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
              />
            </div>
            <button className="confirm-button" onClick={handleSubmit}>
              确认修改
            </button>
          </div>
        </div>
      )}
    </div>
  );
};
export default XinXi;